<template>
        <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="tableName" placeholder="表单名称" class="handle-input mr10"></el-input>
                <el-button type="primary" @click="formshow">查询</el-button>
                <el-button type="success" @click="formadd">新建表单</el-button>
                <el-button type="danger" @click="Del">批量删除</el-button>
            </div>
            <el-row>
                <el-col :span="24">
                    <!--表单列表-->
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark">
                        <el-table-column type="selection" width="105"> </el-table-column>
                        <el-table-column prop="id" label="ID" width="50"> </el-table-column>
                        <el-table-column prop="formName" label="表单名称" width="280"> </el-table-column>
                        <el-table-column prop="description" label="表单描述" width="260"> </el-table-column>
                        <el-table-column prop="createName" label="创建者" width="120"> </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="edit(scope.row.id)" plain>编辑</el-button>
                                <el-button type="info" @click="lookup(scope.row.id)" plain>查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <div class="pagination">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pindex"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="psize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="ptotal">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { GetFormDesigners, DelFormDesigners } from '@/api/forms';

export default {
    components: {},
    props: [],
    data() {
        return {
            tableData: [],
            tableName: '',
            pindex: 1,
            psize: 10,
            ptotal: 1,

            multipleSelection: []
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.formshow();
    },
    methods: {
        formadd() {
            this.$router.push('/addForm');
        },

        formshow() {
            //调用接口获取数据
            GetFormDesigners({ tableName: this.tableName, pageIndex: this.pindex, pageSize: this.psize }).then((ref) => {
                //console.log("ref",ref);
                this.tableData = ref.data.pageList;
                this.ptotal = ref.data.totalCount;
                //console.log("1",this.tableData);
            });
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.psize = val;
            this.formshow();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pindex = val;
            this.formshow();
        },
        //查看表单
        lookup(id) {
            // 跳转到表单查看页面
            this.$router.push(`/formDetail/${id}`);
        },

        edit(id) {
            //跳转到编辑页面并传递id
            this.$router.push({ path:`/editForm/${id}`});
        },

        Del() {
            var idss = [];
            this.$refs.multipleTable.selection.filter((row) => {
                idss.push(row.id);
            });

            if (idss.length <= 0) {
                this.$message.error('请选择要删除的数据');
                return;
            }

            let ids = idss.toString();
            if (confirm('确认要删除吗？')) {
                DelFormDesigners({ ids }).then((ref) => {
                    if (ref.data > 0) {
                        this.$message.success('删除成功！');
                        this.formshow();
                    } else {
                        this.$message.error('删除失败');
                    }
                });
            }
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>